<template>
    <router-view></router-view>
    <div class="navigation">
        <div :class="{'navigation-font-selected': viewSelected == 1 ,'navigation-item':'navigation-item'}" v-on:click="navigate('home')">
            <el-icon size="24" :color="viewSelected == 1 ? '#C3F8A2':black">
                <House />
            </el-icon>
            <span class="navigation-item-font">首页</span>
        </div>
        <div :class="{'navigation-font-selected': viewSelected == 4,'navigation-item':'navigation-item'}"   v-on:click="navigate('publish')">
            <el-icon size="24" :color="viewSelected == 4 ? '#C3F8A2':black">
                <EditPen />
            </el-icon>
            <span class="navigation-item-font ">发帖</span>
        </div>
        <div :class="{'navigation-font-selected': viewSelected == 2,'navigation-item':'navigation-item'}"   v-on:click="navigate('user')">
            <el-icon size="24" :color="viewSelected == 2 ? '#C3F8A2':black">
                <User />
            </el-icon>
            <span class="navigation-item-font ">用户</span>
        </div>
        <div :class="{'navigation-font-selected':  viewSelected == 3,'navigation-item':'navigation-item'}"   v-on:click="navigate('about')">
            <el-icon size="24" :color="viewSelected == 3 ? '#C3F8A2':black">
                <Warning />
            </el-icon>
            <span class="navigation-item-font ">关于</span>
        </div>
    </div>
</template>
  
<script>
    import {getCookie} from '../util/cookie.util'
  export default {
    data(){
        return {
            viewSelected:1,
            title:"hello world",
            number:"hello"    
        }
    },
    methods:{
        navigate(selector){
            if(selector == 'home'){
                this.viewSelected = 1;
                this.$router.push("/index");
            }else if(selector == 'user'){
                this.viewSelected = 2;
                this.$router.push("/user")
            }else if(selector == 'publish'){
                this.viewSelected = 4;
                this.$router.push("/publish");
            }
            else{
                this.$router.push("/about");
                this.viewSelected = 3;
            }
        }
    },
    // 判断是否已经登录，如果登录就跳转到登录界面
    mounted(){
        let token = getCookie("token");
        if(token == null){
            this.$router.push("/login")
        }else{
            this.$router.push("/index")
        }
    },
    beforeCreate() {
        
        let height = window.screen.availHeight;
        let width = window.screen.availWidth;
        document.querySelector('body').setAttribute('style', 'height: '+height + 'px');  
    }
  }
  
</script>
<style scoped>
.navigation{
  position:fixed;
  height: 60px;
  width:100%;
  bottom: 0px;
  border-top: #ccc 1px solid;
  left: 0px;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.navigation-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.navigation-font-selected{
    color:#DDEFBB;
}

.navigation-item-font{
    padding-top: 2px;
    font-size: 10px;
    font-weight: 800;
}
</style>